react hook React Hook Form 인트로 React Hook Form 이란 정의 : 사용하기 쉬운 유효성 검사와 함께 성능 기준에 맞으며 유연하고 확장 가능한 폼 사용 가능한 프레임워크 : 말 그래도 React와 React Native에서 사용 가능함 특장점 re-render 방지 : component를 분리하여 re-render 방지 및 성능 향상 Subscriptions : 개별 input을 subscription 렌더링 줄이기... Reactreact nativehook formreact hookReact [React] Custom Hook Custom Hook이란? 여러 컴포넌트에서 비슷한 기능을 사용할 일이 발생하면 자신만의 Hook을 작성하여 함수를 재사용 할 수 있다. usePromise() 이와 같이 비동기 호출이 필요할 때 프로미스를 생성하는 promiseFn과 언제 새로 함수를 만들지에 대한 조건을 deps 배열을 파라미터로 전송한다. deps 배열의 기본값은 비어있는 배열로 한다. 주의점 useEffect를 사용할... ES6JavaScriptreact hookReactES6 항해99 4주차 WIL React LifeCycle란? 이 LifeCycle은 클래스형 컴포넌트에만 해당되는 내용입니다. 라이프 사이클은 컴포넌트가 브라우저상에 나타나고, 업데이트 되고, 사라지게 될 때 호출되는 메서드들 입니다. 함수 컴포넌트는 v16.8 업데이트 이후 Hook 기능이 생기면서 해결되었다고 합니다 클래스형은 앞으로 쓰이지 않으므로 대충 저런것들이 있구나 하고 넘어가겠습니다. Hooks 는 리액트 ... react hooklifecyclelifecycle HOOK 사용법 리듀서: 현재 상태, 그리고 업데이트를 위해 필요한 정보를 담은 액션(action) 값을 전달받아 새로운 상태를 반환하는 함수 리듀서(reducer): 변화를 일으키는 함수 액션을 만들어 발생시키면, 리듀서가 현재 상태와 전달받은 액션 객체를 파라미터로 받아 온다. 또한 const[state,dispatch] 함수를 받아 온다 state: 현재 가리키고 있는 상태 dispatch:액션을 발생... 리액트 훅리액트React훅mern stackclientfrontendweb fronthookreact hookReact [TIL] React Hook React.memo란? React.memo는 언제 사용하나요? React.memo는 고차 컴포넌트(Higher Order Component)입니다. 고차 컴포넌트(HOC)는 React API의 일부가 아니며, 리액트의 구성적 특성에서 나오는 패턴입니다. React HOC 문서 React.memo에 대해 React 공식문서는 다음과 같이 설명합니다. 당신의 컴포넌트가 동일한 props로 동일한 결과를 렌더링해낸다면,... React.memouseCallbackreact hookReact.memo [TIL] Day-41 데브코스 진행 전에 독학으로 조금 배웠었는데 너무 어려웠어서 직전에 했던 vue는 너무 쉬워서 솔직히 리액트 안하고 vue만 하고싶었다. 그런데 강의에서는 함수형으로 코드를 짜고 react hook을 사용했는데 vue랑 개념이 거의 비슷하고 독학했을 때 class를 사용했던 것에 비해 쉽고 간단해서 아직 기초이긴하지만 리액트도 나름대로 재미있게 학습하는 중이다. 생각해보면 내가 아직 clas... JSXreact hookReactJSX [React] Hook - useCallback( ), useMemo( ) useCallback()과 useMemo() 주로 렌더링 성능을 최적화 해야 하는 상황에서 사용한다. useCallback() 함수를 새로 생성하지 않아도 될때 사용한다. useMemo() 값을 새로 생성하지 않아도 될때 사용한다. useCallback()과 useMemo()사용법 이와 같이 list의 값이 변경 되어야 함수와 값들을 새로 생성시키므로 인하여 렌더링 해야 할 컴포넌트가 많을 ... ES6JavaScriptreact hookReactES6
React Hook Form 인트로 React Hook Form 이란 정의 : 사용하기 쉬운 유효성 검사와 함께 성능 기준에 맞으며 유연하고 확장 가능한 폼 사용 가능한 프레임워크 : 말 그래도 React와 React Native에서 사용 가능함 특장점 re-render 방지 : component를 분리하여 re-render 방지 및 성능 향상 Subscriptions : 개별 input을 subscription 렌더링 줄이기... Reactreact nativehook formreact hookReact [React] Custom Hook Custom Hook이란? 여러 컴포넌트에서 비슷한 기능을 사용할 일이 발생하면 자신만의 Hook을 작성하여 함수를 재사용 할 수 있다. usePromise() 이와 같이 비동기 호출이 필요할 때 프로미스를 생성하는 promiseFn과 언제 새로 함수를 만들지에 대한 조건을 deps 배열을 파라미터로 전송한다. deps 배열의 기본값은 비어있는 배열로 한다. 주의점 useEffect를 사용할... ES6JavaScriptreact hookReactES6 항해99 4주차 WIL React LifeCycle란? 이 LifeCycle은 클래스형 컴포넌트에만 해당되는 내용입니다. 라이프 사이클은 컴포넌트가 브라우저상에 나타나고, 업데이트 되고, 사라지게 될 때 호출되는 메서드들 입니다. 함수 컴포넌트는 v16.8 업데이트 이후 Hook 기능이 생기면서 해결되었다고 합니다 클래스형은 앞으로 쓰이지 않으므로 대충 저런것들이 있구나 하고 넘어가겠습니다. Hooks 는 리액트 ... react hooklifecyclelifecycle HOOK 사용법 리듀서: 현재 상태, 그리고 업데이트를 위해 필요한 정보를 담은 액션(action) 값을 전달받아 새로운 상태를 반환하는 함수 리듀서(reducer): 변화를 일으키는 함수 액션을 만들어 발생시키면, 리듀서가 현재 상태와 전달받은 액션 객체를 파라미터로 받아 온다. 또한 const[state,dispatch] 함수를 받아 온다 state: 현재 가리키고 있는 상태 dispatch:액션을 발생... 리액트 훅리액트React훅mern stackclientfrontendweb fronthookreact hookReact [TIL] React Hook React.memo란? React.memo는 언제 사용하나요? React.memo는 고차 컴포넌트(Higher Order Component)입니다. 고차 컴포넌트(HOC)는 React API의 일부가 아니며, 리액트의 구성적 특성에서 나오는 패턴입니다. React HOC 문서 React.memo에 대해 React 공식문서는 다음과 같이 설명합니다. 당신의 컴포넌트가 동일한 props로 동일한 결과를 렌더링해낸다면,... React.memouseCallbackreact hookReact.memo [TIL] Day-41 데브코스 진행 전에 독학으로 조금 배웠었는데 너무 어려웠어서 직전에 했던 vue는 너무 쉬워서 솔직히 리액트 안하고 vue만 하고싶었다. 그런데 강의에서는 함수형으로 코드를 짜고 react hook을 사용했는데 vue랑 개념이 거의 비슷하고 독학했을 때 class를 사용했던 것에 비해 쉽고 간단해서 아직 기초이긴하지만 리액트도 나름대로 재미있게 학습하는 중이다. 생각해보면 내가 아직 clas... JSXreact hookReactJSX [React] Hook - useCallback( ), useMemo( ) useCallback()과 useMemo() 주로 렌더링 성능을 최적화 해야 하는 상황에서 사용한다. useCallback() 함수를 새로 생성하지 않아도 될때 사용한다. useMemo() 값을 새로 생성하지 않아도 될때 사용한다. useCallback()과 useMemo()사용법 이와 같이 list의 값이 변경 되어야 함수와 값들을 새로 생성시키므로 인하여 렌더링 해야 할 컴포넌트가 많을 ... ES6JavaScriptreact hookReactES6